<template>
    <div class="sjzxLeftBottom">
        <div class="fireStatistics">
            <!-- 统计图 -->
            <Title titles="下垫面类型统计" />
            <div id="vegType"></div>
            <!-- 统计图 -->
            <Title titles="火点强度统计" />
            <div id="strength"></div>
            <!-- 火点列表 -->
            <FirePanel @setFireData="setFireData"></FirePanel>
            <div class="exportExcel" @click="exportExcel">报表生成</div>
        </div>
    </div>
</template>

<script>
import FirePanel from "../../fire/FireMap/FirePanel.vue";
import echarts from "echarts";
import Title from "./LittleTitle.vue";
import axios from "axios";
export default {
    name: "fireStatistics",
    data() {
        return {
            filterCondition: [], //火点筛选条件
            filterResult: [], //火点筛选结果
            fireAll: [], //所有的火点集合
            vegTypeNum: [0, 0, 0, 0, 0],
            strengthNum: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        };
    },
    components: {
        FirePanel,
        Title,
    },
    mounted() {
        this.$nextTick(() => {
            this.drawChart(
                "vegType",
                ["森林", "农田及自然植被", "草地", "城市或荒漠", "灌木"],
                this.vegTypeNum,
                30
            );
            this.drawChart(
                "strength",
                ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                this.strengthNum,
                0
            );
        });
    },
    methods: {
        exportExcel() {
            //changeEarthList
            let earthList = this.$store.state.earthList;
            console.log(earthList);
            axios
                .post(
                    `${sjzxUrl}/task/fireThematicReport`,
                    { list: earthList },
                    { responseType: "blob" }
                )
                .then((res) => {
                    let data = res.data;
                    let url = URL.createObjectURL(
                        new Blob([data], {
                            type: "application/vnd.ms-excel;charset=utf-8 ",
                        })
                    );

                    let link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", "火情专题报表.xlsx");

                    document.body.appendChild(link);
                    link.click();
                });
        },
        drawChart(element, xData, yData, rotate) {
            let dom = document.getElementById(element);
            let myChart = echarts.init(dom);
            let option = {
                grid: {
                    left: "10%",
                    right: "3%",
                    top: "19%",
                },
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    data: xData,
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                        rotate,
                    },
                },
                yAxis: {
                    name: "单位:次",
                    nameTextStyle: {
                        color: "#fff",
                        fontSize: 14,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#3d5269",
                        },
                    },
                    axisLabel: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "#2d3d53",
                        },
                    },
                    //interval:1000,
                },
                series: [
                    {
                        type: "bar",
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#5ef3ff",
                                        },
                                        {
                                            offset: 1,
                                            color: "#06a4f4",
                                        },
                                    ],
                                    false
                                ),
                            },
                        },
                        label: {
                            normal: {
                                show: true,
                                fontSize: 14,
                                fontWeight: "bold",
                                color: "#ffffff",
                                position: "top",
                            },
                        },
                        data: yData,
                    },
                ],
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        // 数据接收及格式化
        setFireData(newValue) {
            this.vegTypeNum = [0, 0, 0, 0, 0];
            this.strengthNum = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
            // 转换格式，存储变量
            newValue.rows.forEach((ele) => {
                ele.introVOList.forEach((item) => {
                    let vegIndex = [
                        "森林",
                        "农田及自然植被",
                        "草地",
                        "城市或荒漠",
                        "灌木",
                    ]
                        .map((item) => item)
                        .indexOf(item.vegType);
                    this.vegTypeNum[vegIndex] = this.vegTypeNum[vegIndex]
                        ? this.vegTypeNum[vegIndex] + 1
                        : 1;
                    let strengthIndex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
                        .map((item) => item)
                        .indexOf(item.intensity_t);
                    this.strengthNum[strengthIndex] = this.strengthNum[
                        strengthIndex
                    ]
                        ? this.strengthNum[strengthIndex] + 1
                        : 1;
                });
            });
            this.drawChart(
                "vegType",
                ["森林", "农田及自然植被", "草地", "城市或荒漠", "灌木"],
                this.vegTypeNum,
                30
            );
            this.drawChart(
                "strength",
                ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"],
                this.strengthNum,
                0
            );
        },
    },
};
</script>

<style lang="stylus" scoped>
.fireStatistics {
    width: 100%;

    #vegType, #strength {
        width: 100%;
        height: vh(200);
    }

    #vegType {
        margin-bottom: vh(30);
    }

    #strength {
        width: 100%;
        height: vh(170);
    }
}
</style>

<style lang="stylus" scoped>
.sjzxLeftBottom {
    color: #fff;

    .exportExcel {
        width: vw(100);
        height: vh(30);
        line-height: vh(30);
        border: 1px solid #00EAFF;
        text-align: center;
        border-radius: 3px;
        float: right;
        margin-top: vh(10);
    }
}
</style>